import * as React from 'react';
import { useState } from 'react'
import classNames from 'classnames';

export interface StarProps {
	children?: React.ReactNode;
	className?: string;
	index?: number;
	value?: number;
	disabled?: boolean;
	character?: React.ReactNode;
	tooltip?: string;
	count?: number;

	onClick?: (index:number) => void;
	onHover?: (index:number) => void;
}

const Star: React.FC<StarProps> = props => {
	const prefixCls = 'bh-rate-star';
	const {
		children,
		className,
		index = 0,
		disabled,
		character,
		value = -1,
		tooltip,
		count,

		onClick,
		onHover,
		...restProps
	} = props;

	const classString = classNames(
		prefixCls,
		{
			[`${prefixCls}-full`]: value >= index,
		},
	);

	//鼠标-移入
	const onMouseEnterCallback = (index:number) => {
		onHover && onHover(index);
	}
	//鼠标-点击
	const onClickCallback = (index:number) => {
		onClick && onClick(index);
	}

	return (
		<li 
			key={index}
			onMouseEnter={() => onMouseEnterCallback(index)}
			onClick={() => onClickCallback(index)} 
			title={tooltip}
			className={classString}>
	    	<div>
	    		<div className="bh-rate-star-first">
	    			{character}
	    		</div>
	    		<div className="bh-rate-star-second">
	    			{character}
	    		</div>
	    	</div>
	    </li>
	)
};

export default Star;